/*
包裹统计2
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header />
    <!-- 列表区 -->
    <el-card style="flex: 1;overflow:auto">
      <div class="app-page">
        <div class="content-flex">
          <el-form ref="search" :model="search" inline size="small">
            <el-form-item label="历史状态日期" prop="date">
              <el-date-picker v-model="search.date" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="packageStatus">
              <el-cascader placeholder="包裹状态" v-model="search.packageStatus" :show-all-levels="false" filterable :props="{
                checkStrictly: true,
                value: 'name',
                children: 'childrenInfo',
                label: 'name'
              }" :options="searchOptions.packageStatus" collapse-tags clearable></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="statisticsType">
              <el-select v-model="search.statisticsType" placeholder="时间轴单位" style="width: 120px">
                <el-option v-for="item in searchOptions.statisticsType" :key="item.value" :value="item.value"
                  :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="storeName" label="">
              <el-select filterable style="width: 120px" v-model="search.storeName" clearable placeholder="全部门店">
                <el-option v-for="item in stores" :key="item.name" :value="item.name" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="storeName" label="">
              <el-select filterable style="width: 120px" v-model="search.deliverName" clearable placeholder="全部渠道">
                <el-option v-for="item in searchOptions.deliverName" :key="item.name" :value="item.name"
                  :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="customerNum" label="">
              <el-input v-model="search.customerNum" placeholder="客户号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="query_batchId">
              <el-button type="primary" round @click="getStoreAmount" style="background: #64b0f2">统计</el-button>
              <el-button type="warning" round @click="$refs.search.resetFields()">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1;overflow: auto">
          <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
            <el-tab-pane label="信息总览" name="1">
              <div class="app-page">
                <el-table show-summary :summary-method="getSummaries"
                  :data="statisticsData.overAllInfo && statisticsData.overAllStoreTotalInfo" style="width: 100%">
                  <el-table-column label="店面">
                    <template slot-scope="scope">
                      {{ scope.row.storeName }}({{stores.filter(store => store.name == scope.row.storeName)[0].code}})
                    </template>
                  </el-table-column>
                  <el-table-column label="总运费" prop="totalFreight">
                    <template slot-scope="scope">
                      CA${{ scope.row.totalFreight }}
                    </template>
                  </el-table-column>
                  <el-table-column label="实际重量" prop="totalRealWeight"></el-table-column>
                </el-table>
                <div style="flex:1;overflow:auto">
                  <div class="statistic-box">
                    <div class="box" v-for="(item, index) in statisticsData.overAllInfo"
                      :style="{ 'margin-left': index % 2 === 0 ? '0' : '2%' }">
                      <el-card shadow="hover">
                        <div slot="header" style="text-align: center">
                          <el-link type="primary"> <i class="el-icon-s-home"></i></el-link>
                          {{ item.storeInfo.name }}({{ item.storeInfo.code }})
                        </div>
                        <el-table :data="item.goodsCostInfos" height="100%" style="width: 100%">
                          <el-table-column label="商品资费类型" prop="goodsCostInfoName" />
                          <el-table-column label="总实际重量" prop="totalRealWeight" />
                          <el-table-column label="单位成本" prop="unitCost" />
                          <el-table-column label="总成本" prop="totalCost">
                            <template slot-scope="scope">
                              ${{ scope.row.totalCost }}
                            </template>
                          </el-table-column>
                          <el-table-column label="总运费" prop="totalFreight">
                            <template slot-scope="scope">
                              ${{ scope.row.totalFreight }}
                            </template>
                          </el-table-column>
                          <el-table-column label="净利润" prop="netProfit">
                            <template slot-scope="scope">
                              ${{ scope.row.netProfit }}
                            </template>
                          </el-table-column>

                        </el-table>
                      </el-card>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="'运单总数' + totalCount + '个'" name="2">
              <my-line ref="line1" tips="运单数量：" y-type="个"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'收费总金额' + totalAmount + '加元'" name="3">
              <my-line ref="line2" tips="收费金额：$" y-type="加元"></my-line>
            </el-tab-pane>
            <el-tab-pane :label="'总实际重量' + totalWeight + '磅'" name="4">
              <my-line ref="line3" tips="实际重量：" y-type="磅"></my-line>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
    <div style="margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200, 500, 1000]" :page-size="pageSize" background
        :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'" :small="isMobile"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { dateFormat } from "@/utils";
import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from 'vuex'
import { getPackage } from '@/api/statistics/parcel'

import myLine from '../components/myLine'
import {
  getPackageInfo,
} from "@/api/baseconfig/wordpoint"
import {
  getChannelMap,
} from "@/api/intermodals/channel";
let search = {
  date: [dateFormat('YYYY-mm-dd', new Date()), dateFormat('YYYY-mm-dd', new Date())],
  statisticsType: 'DAY',
  storeName: '',
  customerNum: '',
  packageStatus: '',
  deliverName: '',
}
export default {
  name: 'parcel',
  components: {
    myHeader,
    myLine
  },
  computed: {
    ...mapGetters(["stores"]),
    isMobile() {
      return window.innerWidth <= 768;
    }
  },
  data() {
    return {
      search: this.cloneObj(search),
      activeName: '1',
      searchOptions: {
        statisticsType: [
          {
            label: '日统计',
            value: 'DAY'
          }, {
            label: '月统计',
            value: 'MONTH'
          }, {
            label: '年统计',
            value: 'YEAR'
          },
        ],
        packageStatus: [],
        deliverName: []
      },
      statisticsData: {},
      totalCount: 0,
      totalAmount: 0,
      totalWeight: 0,
      currentPage: 1,
      pageSize: 20,
      total: 0
    }
  },
  created() {
    this.getStoreAmount()
    //获取包裹状态
    getPackageInfo({ pageNum: 1, pageSize: 100, }).then(resp => {
      this.delChildren(resp.data.records)
      this.searchOptions.packageStatus = resp.data.records
    })
    //获取发货渠道
    getChannelMap().then((resp) => {
      this.searchOptions.deliverName = resp.data
    });
  },
  methods: {
    delChildren(arr) {
      arr.forEach(item => {
        if (item.childrenInfo.length === 0) {
          delete item.childrenInfo
        } else {
          this.delChildren(item.childrenInfo)
        }
      })
    },
    getStoreAmount() {
      this.totalCount = 0
      this.totalAmount = 0
      this.totalWeight = 0
      let query = {
        startDate: this.search.date[0] + ' 00:00:00',
        endDate: this.search.date[1] + ' 23:59:59',
        statisticsType: this.search.statisticsType,
        customerNum: this.search.customerNum,
        storeName: this.search.storeName,
        deliverName: this.search.deliverName,
        packageStatus: Array.isArray(this.search.packageStatus) ? this.search.packageStatus[this.search.packageStatus.length - 1] : this.search.packageStatus,
      }
      this.activeName = '1'
      getPackage(query).then(resp => {
        this.statisticsData = resp.data
        this.statisticsData.countDateInfos.forEach(item => {
          this.totalCount += item.count
        })
        this.statisticsData.amountDateInfos.forEach(item => {
          this.totalAmount += item.amount
        })
        this.statisticsData.weightDateInfos.forEach(item => {
          this.totalWeight += item.amount
        })
        this.total = this.totalCount
      })
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index === 1) {
            sums[index] = 'CA$' + sums[index];
          }
          console.log(sums[index])
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    },
    handleTabClick(tab) {
      if (tab.name == 2) {
        this.$nextTick(() => {
          let xData = this.statisticsData.countDateInfos.map(item => item.dateString)
          let yData = this.statisticsData.countDateInfos.map(item => item.count)
          this.$refs.line1.init(xData, yData)
        })
      }
      if (tab.name == 3) {
        this.$nextTick(() => {
          let xData = this.statisticsData.amountDateInfos.map(item => item.dateString)
          let yData = this.statisticsData.amountDateInfos.map(item => item.amount)
          this.$refs.line2.init(xData, yData)
        })
      }
      if (tab.name == 4) {
        this.$nextTick(() => {
          let xData = this.statisticsData.weightDateInfos.map(item => item.dateString)
          let yData = this.statisticsData.weightDateInfos.map(item => item.amount)
          this.$refs.line3.init(xData, yData)
        })
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getStoreAmount();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getStoreAmount();
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/_themeify";
@import "../../styles/mobile.scss";

.app-page {
  .search-form {
    @media screen and (max-width: 768px) {
      .el-form-item {
        width: 100%;
        margin-right: 0;
      }
    }
  }

  .el-tabs {
    @media screen and (max-width: 768px) {
      /deep/ .el-tabs__header {
        margin-bottom: 10px;
      }

      /deep/ .el-tabs__item {
        font-size: 12px;
        padding: 0 10px;
      }
    }
  }

  .el-table {
    @media screen and (max-width: 768px) {
      /deep/ .el-table__row {
        td {
          padding: 5px !important;
        }
      }
    }
  }

  .chart-container {
    @media screen and (max-width: 768px) {
      height: 300px !important;
    }
  }
}

/deep/ .el-tabs {
  height: 100%;
}

/deep/ .el-tabs--border-card {
  box-shadow: unset;
}

/deep/ .el-tabs__content {
  height: calc(100% - 50px);

  &>div {
    height: 100%;
  }
}

.statistic-box {
  display: flex;
  height: 100%;
  justify-content: space-between;
  flex-wrap: wrap;

  .box {
    width: 49%;
    height: 400px;
  }

  /deep/.el-card__body {
    height: calc(100% - 50px)
  }
}

// 移动端对话框样式优化
.el-dialog {
  @media screen and (max-width: 768px) {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;

        .el-form-item__label {
          float: none;
          text-align: left;
          padding: 0 0 5px;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      .el-input,
      .el-select,
      .el-cascader {
        width: 100%;
      }

      .el-date-picker {
        width: 100% !important;
      }
    }
  }
}
</style>
